<template>
  <view class="page-main">
    <!-- Search Box with Navigator -->
    <view class="search-container">
      <input class="search-box" type="text" placeholder="搜索地点...">
      <navigator class="navigator-button" url="/pages/refuelNearby/refuelNearby">
        列表模式
      </navigator>
    </view>

    <!-- Map Component -->
    <liu-easy-map ref="liuEasyMap" :centerLat="'36.05709'" :centerLng="'103.82538'" :scale="14"
        :markerData="markerData" :polygons="polygons" @clickMarker="markerClick"></liu-easy-map>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        markerData: [
          {
            id: 1,
            name: '中国石油加油站',
            address: '甘肃省兰州市城关区人民政府',
            latitude: '36.05989',
            longitude: '103.83502',
            markerUrl: 'https://img0.baidu.com/it/u=550544800,2229099292&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            iconWidth: 32,
            iconHeight: 32,
            calloutColor: '#ffffff',
            calloutFontSize: 14,
            calloutBorderRadius: 6,
            calloutPadding: 8,
            calloutBgColor: '#0B6CFF',
            calloutDisplay: 'ALWAYS',
          },
          {
            id: 2,
            name: '测试地址',
            address: '测试地址详细地址测试地址详细地址测试地址详细地址测试地址详细地址',
            latitude: "36.05064",
            longitude: "103.82538"
          }
        ],
        polygons: [
          {
            points: [
              { latitude: "36.06637", longitude: "103.82471" },
              { latitude: "36.06255", longitude: "103.82321" },
              { latitude: "36.06234", longitude: "103.81928" },
              { latitude: "36.06036", longitude: "103.82175" },
              { latitude: "36.05653", longitude: "103.82152" },
              { latitude: "36.05953", longitude: "103.82476" },
              { latitude: "36.05690", longitude: "103.82785" },
              { latitude: "36.06023", longitude: "103.82747" },
              { latitude: "36.06243", longitude: "103.83014" },
              { latitude: "36.06245", longitude: "103.82616" }
            ],
            strokeWidth: 2,
            strokeColor: "#FF000060",
            fillColor: "#FF000090"
          }
        ]
      };
    },
    methods: {
      markerClick(e) {
        console.log('点击标记点信息：', e);
      }
    }
  };
</script>

<style lang="scss">
  .page-main {
    width: 100%;
    height: 100vh;
  }

  .search-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
  }

  .search-box {
    width: 200px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .navigator-button {
    margin-left: 10px;
    padding: 8px 16px;
    background-color: #0B6CFF;
    color: white;
    border-radius: 4px;
    text-align: center;
  }
</style>
